<template>
  <div>
    <h1>MandyTest1</h1>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve1')">reserve1</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve2')">reserve2</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve3')">reserve3</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve4')">reserve4</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve5')">reserve5</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve6')">reserve6</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve7')">reserve7</el-button>
    <el-button v-if="hasPermission('/sysadmin/test1/reserve8')">reserve8</el-button>
    <el-tree draggable
             :allow-drop="allowDrop"
             @node-drop="sort"
             style="font-size:14px;width:250px;"
             ref="tree"
             :data="catalogList"
             :expand-on-click-node="false"
             node-key="id"
             :highlight-current="true"
             empty-text="暂无数据">
    </el-tree>

  </div>
</template>
<script>
import { hasPermission } from "@/utils/dict";
export default {
  name: "MandyTest1",

  data() {
    return {
      myMap: null,
      catalogList: [{
        id: 1,
        parentId: 0,
        label: '一级 1',
        children: [{
          id: 11,
          parentId: 1,
          label: '二级 1-1',
        },
        {
          id: 12,
          parentId: 1,
          label: '二级 1-2',
        },
        ]
      }, {
        id: 2,
        parentId: 0,
        label: '一级 2',
        children: [{
          id: 21,
          parentId: 2,
          label: '二级 2-1',
        }, {
          id: 22,
          parentId: 2,
          label: '二级 2-2',
          children: [{
            id: 221,
            label: '三级 2-2-1'
          }]
        }]
      }, {
        id: 3,
        parentId: 0,
        label: '一级 3',
        children: [{
          id: 31,
          parentId: 3,
          label: '二级 3-1',
          children: [{
            id: 311,
            label: '三级 3-1-1'
          }]
        }, {
          id: 32,
          parentId: 3,
          label: '二级 3-2',
          children: [{
            id: 321,
            parentId: 32,
            label: '三级 3-2-1'
          },
          {
            id: 322,
            parentId: 32,
            label: '三级 3-2-2'
          },
          {
            id: 323,
            parentId: 33,
            label: '三级 3-2-3'
          }]
        }]
      }],
    };
  },

  methods: {
    hasPermission(url) {
      return hasPermission(url)
    },
    allowDrop(draggingNode, dropNode, type) {
      //注掉的是同级拖拽
      if (draggingNode.data.level === dropNode.data.level) {
        if (draggingNode.data.parentId === dropNode.data.parentId) {
          console.log("type:" + type);
          return type === 'prev' || type === 'next'
        }
      } else {
        // 不同级进行处理
        return false
      }
      //任意级别拖拽
      // if (draggingNode.data.parentId === dropNode.data.parentId) {
      //   return type === 'prev' || type === 'next'
      // } else {
      //   return type === 'prev' || type === 'next' || type === 'inner'
      // }
    },
    //拖拽完成之后要重新排序
    /* 
    *  draggingNode：被拖拽节点对应的 Node
    *  dropNode：结束拖拽时最后进入的节点
    *  type: 被拖拽节点的放置位置（before、after、inner）
    *  event
    */
    sort(draggingNode, dropNode, type, event) {
      console.log(draggingNode)
      console.log(dropNode)
      if (draggingNode.data.parentId === dropNode.data.parentId) {
        let obj = {
          parentId: '',
          arr: []
        }
        obj.parentId = dropNode.data.parentId
        for (let item of dropNode.parent.childNodes) {
          obj.arr.push(item.data.id)
        }
        console.log(obj)
        //this.updateOrderMe(obj)
      } else {
        let obj = {
          parentId: '',
          id: '',
          newParentId: ''
        }
        obj.parentId = draggingNode.data.parentId
        obj.id = draggingNode.data.id
        obj.newParentId = dropNode.data.id
        //this.randomDrag(obj)
      }
    },
    randomDrag(obj) {
      this.$http
        .post(url, obj).then(res => {
          if (!res.data.success) {
            this.$message.warning(res.data.msg)
          }
        })
    },
    updateOrderMe(obj) {
      this.$http
        .post(url, {
          parentId: obj.parentId,
          ids: obj.arr
        }).then(res => {
          if (!res.data.success) {
            this.$message.warning(res.data.msg)
          }
        })
    }
  }
};
</script>

<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
